<template>
  <!-- 登录表单区域，使用Element Plus的表单组件 -->
  <div class="login-container">
    <el-form
      ref="ruleFormRef"
      class="login-form"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="ruleForm.userName"
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
        />
      </el-form-item>
      <el-form-item label="密码" prop="passWord">
        <el-input
          v-model="ruleForm.passWord"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          type="password"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          block
          @click="submitForm(ruleFormRef)"
        >
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-table v-loading="loading" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
// 假设 api 模块这样引入，实际根据你的项目结构调整
import { loginApi } from '@/api/api'; 

const ruleFormRef = ref();
const ruleForm = reactive({
  userName: '',
  passWord: '',
});

const rules = reactive({
  userName: [
    { 
      required: true, 
      message: '请输入用户名', 
      trigger: 'blur' 
    },
    { 
      min: 3, 
      max: 6, 
      message: '长度应在 3 到 6 个字符', 
      trigger: 'blur' 
    },
  ],
  passWord: [
    { 
      required: true, 
      message: '请输入密码', 
      trigger: 'blur' 
    },
    { 
      min: 3, 
      max: 8, 
      message: '长度应在 3 到 8 个字符', 
      trigger: 'blur' 
    },
  ],
});

const router = useRouter();

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 调用登录接口
      loginApi(ruleForm.userName, ruleForm.passWord).then((res) => {
        console.log('登录请求返回：', res);
        if (res.data.code === 1) {
          ElMessage({
            message: '登录成功',
            type: 'success',
          });
          // 存储 token 到本地存储
          localStorage.setItem('token', res.data.token); 
          // 登录成功跳转到首页，可根据实际调整
          router.push('/'); 
        } else {
          ElMessage.error('登录失败，请检查用户名和密码');
        }
      }).catch((error) => {
        console.error('登录接口调用失败：', error);
        ElMessage.error('网络异常，请稍后再试');
      });
    } else {
      console.log('表单校验失败：', fields);
    }
  });
};
</script>

<style lang="scss" scoped>
// 登录页整体样式，使表单居中显示
.login-container {
  display: flex;
  justify-content: right;
  align-items: center;
  min-height: 100vh;
  background-color: #1f2d3d; /* 深蓝色背景，可根据需求调整 */
}
// 登录表单样式
.login-form {
  width: 320px;
  background-color: #fff;
  margin-right: 20px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>